<template>
  <div class="changeClassAddContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          转班
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="changeClass">
          <el-row :gutter="10" class="changeClass_info">
            <el-col :span="6">孩子姓名：赵乐乐</el-col>
            <el-col :span="6">监护人：罗琴</el-col>
            <el-col :span="10">联系电话：18000000000</el-col>
          </el-row>
          <div>原班信息</div>
          <div>
            <table class="table" cellspacing="0" style="margin-top:0.1rem;">
              <thead class="thead">
                <tr>
                  <td style="width: 2.5rem;">学年</td>
                  <td style="width: 2.5rem;">年级类型</td>
                  <td style="width: 2.5rem;">班级</td>
                  <td style="width: 2.5rem;"></td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr>
                  <td>2019-2020学年</td>
                  <td>幼小</td>
                  <td>1班</td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="margin:0.4rem 0 0.1rem 0;">请选择转入班级</div>
          <div style="overflow: hidden;">
            <el-select
              style="width:2.03rem;float: left;"
              clearable
              v-model="value"
              placeholder="请选择学年"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="value"
              placeholder="请选择年级"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="value"
              placeholder="请选择班级"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div>
            <table class="table" cellspacing="0" style="margin-top:0.1rem;">
              <thead class="thead">
                <tr>
                  <td style="width: 2.5rem;">学年</td>
                  <td style="width: 2.5rem;">年级类型</td>
                  <td style="width: 2.5rem;">班级</td>
                  <td style="width: 2.5rem;">班级学员</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr>
                  <td>2019-2020学年</td>
                  <td>幼小</td>
                  <td>1班</td>
                  <td>14/15</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="margin-top:0.3rem;overflow: hidden;">
            <div style="float:left;">&nbsp;&nbsp;备注&nbsp;&nbsp;</div>
            <el-input
              type="textarea"
              :rows="2"
              style="width:90%;float:left;"
              placeholder="请输入内容"
              v-model="value"
            ></el-input>
          </div>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="cancel()">取消</div>
          <div class="btn_sure" @click="sure()">确定转班</div>
        </div>
      </div>
    </div>
    <el-dialog
      title="转班成功"
      :visible.sync="dialog_success"
      top="18%"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="row_one" style="padding: 0.1rem 0 0.1rem 0;">新班信息</div>
      <div>
        <table class="table" cellspacing="0" style="margin-top:0.1rem;">
          <thead class="thead">
            <tr>
              <td style="width: 2.5rem;">学年</td>
              <td style="width: 2.5rem;">年级类型</td>
              <td style="width: 2.5rem;">班级</td>
              <td style="width: 2.5rem;">班级学员</td>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr>
              <td>2019-2020学年</td>
              <td>幼小</td>
              <td>1班</td>
              <td>14/15</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      value: "",
      selectCourseList: [],
      dialog_success: false
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    sure() {
      vm.dialog_success = true;
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dict = tool.getItem(lsKey.dict, true);
  }
};
</script>
<style lang="scss">
.changeClassAddContainer {
  .changeClass {
    padding: 0.2rem;
    .changeClass_info {
      width: 70%;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>
.panel {
  width: 10rem;
}
</style>
<style>
.customClass {
  width: 5rem;
}
</style>





